<template>
  <div id='shouyecategory' style="width: 100%; height: 100%">
    <!-- 搜索页 -->
    <div class="bannerdata">
      <div class="searchForm">
        <el-form :inline="true" :model="params" class="demo-form-inline">
          <el-form-item label="标题">
            <el-input 
            v-model="params.title" 
            placeholder="按标题查找" 
            class="block"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button 
            icon="el-icon-search"
            @click="getList(1)"
            >查询</el-button>
            <el-button 
            type="primary" 
            icon="el-icon-plus"
            @click="add"
            >增加</el-button>
            <el-button 
            type="danger" 
            icon="el-icon-delete"
            @click="removeMore"
            >批量删除</el-button>
          </el-form-item>         
        </el-form>
      </div>
    </div>
    <!-- 表格 -->
    <div class="bannerdata">
      <el-table :data="rows" height="500" style="width: 100%"  @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="img" label="图片">   
          <template slot-scope="scope">
            <img  style="width:80px;height:80px;max-width:100%;max-height:100%;" v-if="scope.row.img" :src="scope.row.img"/>
          </template>
        </el-table-column>
        <el-table-column  prop="title" label="标题">       
        </el-table-column>
        <el-table-column  prop="url" label="跳转地址">       
        </el-table-column>
        <el-table-column  prop="status" label="是否启用">   
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="statusChange(scope.row)"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width='320'>       
          <template slot-scope="scope">
            <el-button 
            type="primary" 
            size="mini"
            icon="el-icon-edit"
            style="margin-right:16px"
            @click="edit(scope.row)"
            >编辑</el-button>
            <el-popconfirm
              title="确定删除此数据吗？"
              @confirm="remove(scope.row)"
            >
              <el-button 
              type="danger" 
              size="mini"
              icon="el-icon-refresh-right"
              slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 四百条消息 -->
    <div style="margin-top:30px" class="block">
        <el-pagination
          @size-change="sizeChange"
          @current-change="getList"
          :current-page="params.pageNum"
          :page-sizes="[5,10, 20, 50, 100]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
    </div>
    <categoryEdit @load="getList" ref="categoryEditer"></categoryEdit>
  </div>
</template>

<script>
import categoryEdit from './categoryEdit.vue'
export default {
  name: "shouyecategory",
  components: {
    categoryEdit,
  },
  data() {
    return {
      params:{
        title:'',
        type:'category',
        pageNum:1,
        pageSize:10
      },
      rows:[],
      total:0,
      selecteds:[]
    }
  },
  methods: {
    add(){
      this.$refs.categoryEditer.add()
    },
    edit(row){
      this.$refs.categoryEditer.edit(row)
    },
    ///获取列表
    getList(pageNum){
      if(pageNum) this.params.pageNum = pageNum
      this.$http({
        url:'/admin/index',
        params:this.params
        }).then(res => {
        this.total = res.total
        this.rows = res.rows       
      })
    },
    ///启用停用
    statusChange(row){
      this.$http({
        url:'/admin/index',
        method:'PUT',
        data:{
          indexId:row._id,
          status:row.status
        }
      }).then(res => {
        if(res.errorMsg){
          this.getList()
        }
      })
    },
    //修改pageSize
    sizeChange(pageSize){
      this.params.pageSize = pageSize
      this.getList(1)
    },
    ///删除数据
    remove(row){
      this.$http({
        url:'/admin/index',
        method:'DELETE',
        params:{indexId:row._id}
      }).then(res => {
        if(!res.errorMsg){
          this.getList(1)
        }
      })
    },
    handleSelectionChange(rows) {
      ///存储选中数据
      this.selecteds = rows
    },
    ///批量删除
    removeMore(){
      ///获取被选中的数据
      let chekedRowsPrmose = []
      let success = [],fail = []
      for(let i = 0;i < this.selecteds.length; i++){
        chekedRowsPrmose.push(
          new Promise(resovle => {
            let row = this.selecteds[i]
            this.$http({
              url:'/admin/index',
              method:'DELETE',
              params:{indexId:row._id}
            }).then(res => {
              if(!res.errorMsg){
                success.push(row._id)
              }else{
                fail.push(row._id)
              }
              resovle()
            })
          })
        )
      }
      ///删除
      Promise.all(chekedRowsPrmose).then(() => {
        this.$message({
          message:`批量删除完成,成功删除${success.length}条数据,删除失败${fail.length}条数据`,
          // type:'success',
          duration:3000
        })
        this.getList(1)
      })
    },
  },
  created() {
    this.getList()
  },
  mounted() {},
};
</script>



<style>
.bannerdata{
    width: 1355px;
}
</style>